<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="./css/withour.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* 新增样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
        }

        .contact-section {
            background-color: #f9f9f9;
            padding: 50px 0;
            text-align: center;
        }

        .contact-heading {
            margin-bottom: 30px;
        }

        .contact-heading h1 {
            font-size: 2.5rem;
            color: #267e3e;
            margin-bottom: 15px;
        }

        .contact-heading p {
            font-size: 1.1rem;
            color: #666;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* 新增徽章样式 */
        .contact-badges {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
        }
        
        .contact-badge {
            display: flex;
            align-items: center;
            background: rgba(38, 126, 62, 0.1);
            padding: 8px 20px;
            border-radius: 50px;
            transition: all 0.3s ease;
        }
        
        .contact-badge:hover {
            background: rgba(38, 126, 62, 0.2);
            transform: translateY(-3px);
        }
        
        .badge-icon {
            color: #267e3e;
            font-size: 1.2rem;
            margin-right: 8px;
        }
        
        .badge-text {
            color: #267e3e;
            font-weight: 500;
        }

        .contact-methods {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 50px;
        }

        .contact-method {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            min-width: 250px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .contact-method:hover {
            transform: translateY(-10px);
        }

        .contact-method i {
            font-size: 2rem;
            color: #267e3e;
            margin-bottom: 15px;
        }

        .contact-method h3 {
            margin-bottom: 10px;
            color: #333;
        }

        .contact-method p {
            color: #666;
            line-height: 1.6;
        }

        .contact-form-container {
            width: 100%;
            max-width: 500px;
            padding: 40px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .form-title {
            text-align: center;
            margin-bottom: 30px;
        }

        .form-title h2 {
            color: #267e3e;
            font-size: 1.8rem;
            margin-bottom: 10px;
        }

        .form-title p {
            color: #666;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }

        .form-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }

        .form-input:focus {
            border-color: #267e3e;
            outline: none;
        }

        textarea.form-input {
            min-height: 150px;
            resize: vertical;
        }

        .submit-btn {
            background-color: #267e3e;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%;
            font-weight: 500;
        }

        .submit-btn:hover {
            background-color: #1d6230;
        }

        .map-container {
            width: 100%;
            max-width: 600px;
            margin-top: 40px;
        }

        .map-container h3 {
            margin-bottom: 15px;
            color: #267e3e;
        }

        .map-frame {
            width: 100%;
            height: 450px;
            border: none;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .contact-info {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 40px;
        }

        .info-item {
            flex: 1;
            min-width: 250px;
            padding: 20px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
        }

        .info-icon {
            width: 50px;
            height: 50px;
            background: #267e3e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }

        .info-icon i {
            color: white;
            font-size: 1.2rem;
        }

        .info-content h4 {
            margin: 0 0 5px;
            color: #333;
        }

        .info-content p {
            margin: 0;
            color: #666;
        }

        .faq-section {
            margin-top: 60px;
            width: 100%;
        }

        .faq-heading {
            text-align: center;
            margin-bottom: 30px;
        }

        .faq-heading h2 {
            color: #267e3e;
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .faq-heading p {
            color: #666;
        }

        .faq-item {
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
        }

        .faq-question {
            padding: 15px 20px;
            background: #f9f9f9;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .faq-question i {
            transition: transform 0.3s;
        }

        .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }

        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }

        .faq-item.active .faq-answer {
            max-height: 500px;
            padding: 20px;
        }

        .contact-social {
            margin-top: 50px;
            text-align: center;
        }

        .contact-social h3 {
            color: #267e3e;
            margin-bottom: 20px;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .social-icon {
            width: 50px;
            height: 50px;
            background: #f5f5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            color: #267e3e;
            font-size: 1.5rem;
            text-decoration: none;
        }

        .social-icon:hover {
            background: #267e3e;
            color: white;
            transform: translateY(-5px);
        }

        .newsletter {
            margin-top: 60px;
            padding: 40px;
            background: #f9f9f9;
            border-radius: 10px;
            text-align: center;
        }

        .newsletter h3 {
            color: #267e3e;
            margin-bottom: 15px;
        }

        .newsletter p {
            color: #666;
            margin-bottom: 20px;
        }

        .newsletter-form {
            display: flex;
            max-width: 500px;
            margin: 0 auto;
        }

        .newsletter-input {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px 0 0 5px;
            font-size: 1rem;
        }

        .newsletter-btn {
            background: #267e3e;
            color: white;
            border: none;
            padding: 0 20px;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
        }

        /* 团队部分样式 */
        .section-heading {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .section-heading h2 {
            color: #267e3e;
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        .section-heading p {
            color: #666;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .team-section {
            margin-top: 70px;
            width: 100%;
        }
        
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }
        
        .team-member {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .team-member:hover {
            transform: translateY(-10px);
        }
        
        .member-photo-container {
            height: 200px;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .member-photo-placeholder {
            width: 100px;
            height: 100px;
            background: #e0e0e0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 3rem;
        }
        
        .member-info {
            padding: 20px;
        }
        
        .member-info h3 {
            color: #333;
            margin-bottom: 5px;
        }
        
        .member-title {
            color: #267e3e;
            font-weight: 500;
            margin-bottom: 10px;
        }
        
        .member-desc {
            color: #666;
            line-height: 1.6;
        }
        
        /* 流程部分样式 */
        .process-section {
            margin-top: 70px;
            width: 100%;
        }
        
        .process-steps {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            position: relative;
            flex-wrap: wrap;
        }
        
        .process-steps::before {
            content: '';
            position: absolute;
            top: 40px;
            left: 0;
            right: 0;
            height: 2px;
            background: #e0e0e0;
            z-index: 0;
        }
        
        .process-step {
            width: 22%;
            min-width: 220px;
            text-align: center;
            position: relative;
            z-index: 1;
            margin-bottom: 30px;
        }
        
        .step-number {
            width: 80px;
            height: 80px;
            background: #267e3e;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            font-weight: bold;
            margin: 0 auto 20px;
            position: relative;
            z-index: 1;
            transition: transform 0.3s ease;
        }
        
        .process-step:hover .step-number {
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(38, 126, 62, 0.3);
        }
        
        .step-content h3 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .step-content p {
            color: #666;
        }
        
        /* 客户评价轮播 */
        .testimonial-section {
            margin-top: 70px;
            width: 100%;
            padding: 30px 0;
        }
        
        .testimonial-carousel {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            padding: 30px 0;
        }
        
        .testimonial-card {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            text-align: center;
            display: none;
            transition: opacity 0.5s ease;
        }
        
        .testimonial-card.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .testimonial-quote i {
            color: #267e3e;
            font-size: 2rem;
            opacity: 0.3;
            margin-bottom: 15px;
        }
        
        .testimonial-quote p {
            font-size: 1.1rem;
            color: #555;
            line-height: 1.7;
            font-style: italic;
            margin-bottom: 20px;
        }
        
        .author-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .author-title {
            color: #666;
            font-size: 0.9rem;
        }
        
        .testimonial-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
        }
        
        .control-dots {
            display: flex;
            gap: 8px;
            margin: 0 20px;
        }
        
        .dot {
            width: 10px;
            height: 10px;
            background: #ddd;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .dot.active {
            background: #267e3e;
            transform: scale(1.2);
        }
        
        .control-prev, .control-next {
            background: transparent;
            border: none;
            color: #267e3e;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .control-prev:hover, .control-next:hover {
            background: rgba(38, 126, 62, 0.1);
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .contact-form-container, .map-container {
                max-width: 100%;
            }
            
            .process-step {
                width: 45%;
            }
            
            .process-steps::before {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .contact-methods {
                flex-direction: column;
                align-items: center;
            }
            
            .newsletter-form {
                flex-direction: column;
            }
            
            .newsletter-input {
                border-radius: 5px;
                margin-bottom: 10px;
            }
            
            .newsletter-btn {
                border-radius: 5px;
                padding: 10px;
            }
            
            .process-step {
                width: 100%;
            }
            
            .team-grid {
                grid-template-columns: 1fr;
            }
        }

        /* 页脚样式 */
        .page-footer {
            background-color: #267e3e;
            color: white;
            padding: 30px 0;
            text-align: center;
            margin-top: 50px;
        }
        
        .page-footer-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .page-footer p {
            margin: 8px 0;
            font-size: 15px;
        }
        
        .page-footer-links {
            margin: 20px 0;
        }
        
        .page-footer-links a {
            color: #d4f5d9;
            text-decoration: none;
            padding: 0 15px;
            transition: color 0.3s;
        }
        
        .page-footer-links a:hover {
            color: white;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <header class="header">
        <div class="logo">
            <img style="width: 50px;border-radius: 50%;margin-right: 20px;"
                src="https://img0.baidu.com/it/u=1155563640,2612093044&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt="">
            健康食品
        </div>
        <nav class="nav">
            <a href="./main.html" class="nav-item">首页</a>
            <a href="./product.html" class="nav-item">产品</a>
            <a href="./service.html" class="nav-item">评价</a>
            <a href="./our.html" class="nav-item">关于我们</a>
            <a href="./withour.html" class="nav-item active">联系我们</a>
        </nav>
        <img src="https://img1.baidu.com/it/u=1207015496,2831434052&fm=253&fmt=auto&app=120&f=JPEG?w=504&h=500"
            alt="用户头像" class="user-avatar">
    </header>

    <main>
        <!-- 联系我们顶部区域 -->
        <section class="contact-section">
            <div class="contact-heading">
                <h1>与我们保持联系</h1>
                <p>无论您是有关于我们产品的疑问，还是想了解更多健康饮食信息，或者有合作意向，我们都很乐意听取您的声音。</p>
                <div class="contact-badges">
                    <div class="contact-badge">
                        <span class="badge-icon"><i class="fas fa-headset"></i></span>
                        <span class="badge-text">7x24小时服务</span>
                    </div>
                    <div class="contact-badge">
                        <span class="badge-icon"><i class="fas fa-reply"></i></span>
                        <span class="badge-text">24小时内回复</span>
                    </div>
                    <div class="contact-badge">
                        <span class="badge-icon"><i class="fas fa-users"></i></span>
                        <span class="badge-text">专业团队支持</span>
                    </div>
                </div>
            </div>

            <div class="contact-methods">
                <div class="contact-method">
                    <i class="fas fa-phone-alt"></i>
                    <h3>电话咨询</h3>
                    <p>工作日: 9:00 - 18:00</p>
                    <p>021-12345678</p>
                </div>
                <div class="contact-method">
                    <i class="fas fa-envelope"></i>
                    <h3>电子邮件</h3>
                    <p>24小时内回复</p>
                    <p>contact@healthfood.com</p>
                </div>
                <div class="contact-method">
                    <i class="fas fa-map-marker-alt"></i>
                    <h3>公司地址</h3>
                    <p>上海市浦东新区</p>
                    <p>健康路123号</p>
                </div>
            </div>
        </section>

        <div class="container">
            <!-- 联系表单 -->
            <div class="contact-form-container">
                <div class="form-title">
                    <h2>发送消息</h2>
                    <p>填写下面的表单，我们会尽快回复您</p>
                </div>

                <form id="contactForm">
                    <div class="form-group">
                        <label class="form-label">姓名 *</label>
                        <input type="text" class="form-input" placeholder="请输入您的姓名" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">邮箱 *</label>
                        <input type="email" class="form-input" placeholder="请输入您的邮箱" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">电话</label>
                        <input type="tel" class="form-input" placeholder="请输入您的联系电话">
                    </div>

                    <div class="form-group">
                        <label class="form-label">主题</label>
                        <select class="form-input">
                            <option value="">请选择咨询主题</option>
                            <option value="product">产品咨询</option>
                            <option value="order">订单查询</option>
                            <option value="cooperation">商务合作</option>
                            <option value="suggestion">意见建议</option>
                            <option value="other">其他</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">消息内容 *</label>
                        <textarea class="form-input" placeholder="请输入您想咨询的内容..." required></textarea>
                    </div>

                    <button type="submit" class="submit-btn" onclick="handleSubmit(event)">提交信息</button>
                </form>
            </div>

            <!-- 地图 -->
            <div class="map-container">
                <h3>我们的位置</h3>
                <iframe class="map-frame" src="https://map.baidu.com/poi/%E4%B8%8A%E6%B5%B7%E5%B8%82%E6%B5%A6%E4%B8%9C%E6%96%B0%E5%8C%BA%E5%81%A5%E5%BA%B7%E8%B7%AF/@13522183.625,3641755.14,15z?uid=df3b1bf36c40ae93cb26c7c9&ugc_type=3&ugc_ver=1&device_ratio=1&compat=1&querytype=detailConInfo&da_src=shareurl" allowfullscreen="" loading="lazy"></iframe>

                <!-- 联系信息 -->
                <div class="contact-info">
                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="info-content">
                            <h4>营业时间</h4>
                            <p>周一至周五: 9:00 - 18:00</p>
                            <p>周六: 10:00 - 16:00</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">
                            <i class="fas fa-subway"></i>
                        </div>
                        <div class="info-content">
                            <h4>交通指南</h4>
                            <p>地铁2号线浦东大道站</p>
                            <p>公交15路、82路健康路站</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 常见问题 -->
            <div class="faq-section">
                <div class="faq-heading">
                    <h2>常见问题</h2>
                    <p>以下是客户常问的一些问题，希望能帮助到您</p>
                </div>

                <div class="faq-item">
                    <div class="faq-question">
                        <span>如何订购健康食品套餐？</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>您可以通过我们的官方网站或手机APP进行订购。选择您喜欢的套餐类型，添加到购物车，然后按照提示完成支付流程。我们会根据您选择的配送时间将新鲜食材送到您指定的地址。</p>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question">
                        <span>可以定制特定的饮食方案吗？</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>是的，我们提供个性化饮食方案定制服务。您可以在下单时选择特定的饮食偏好和限制（如素食、无麸质、低碳水等），我们的营养师团队会为您制定合适的健康餐食计划。</p>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question">
                        <span>如何成为您的供应商？</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>我们欢迎优质的食材供应商加入我们的供应链。请通过电子邮件（business@healthfood.com）联系我们的采购部门，并附上您的公司资质和产品介绍。我们会在收到邮件后的7个工作日内回复您。</p>
                    </div>
                </div>

                <div class="faq-item">
                    <div class="faq-question">
                        <span>你们的食材如何保证新鲜度？</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>我们与当地农场建立了直接合作关系，确保所有蔬果都是当天采摘。所有食材都通过专业的冷链物流系统配送，全程控温，保证食材的新鲜度和营养价值。每个批次的食材都经过严格的质量检测，确保符合我们的高标准。</p>
                    </div>
                </div>
            </div>

            <!-- 社交媒体 -->
            <div class="contact-social">
                <h3>关注我们的社交媒体</h3>
                <div class="social-icons">
                    <a href="#" class="social-icon">
                        <i class="fab fa-weixin"></i>
                    </a>
                    <a href="#" class="social-icon">
                        <i class="fab fa-weibo"></i>
                    </a>
                    <a href="#" class="social-icon">
                        <i class="fab fa-tiktok"></i>
                    </a>
                    <a href="#" class="social-icon">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
            </div>

            <!-- 订阅通讯 -->
            <div class="newsletter">
                <h3>订阅我们的健康通讯</h3>
                <p>获取最新的健康饮食资讯、促销活动和新品信息</p>
                <form class="newsletter-form">
                    <input type="email" class="newsletter-input" placeholder="请输入您的邮箱地址">
                    <button type="submit" class="newsletter-btn">订阅</button>
                </form>
            </div>
            
            
            
            <!-- 流程说明 -->
            <div class="process-section">
                <div class="section-heading">
                    <h2>我们的服务流程</h2>
                    <p>简单高效的沟通流程，为您提供最佳服务体验</p>
                </div>
                
                <div class="process-steps">
                    <div class="process-step">
                        <div class="step-number">1</div>
                        <div class="step-content">
                            <h3>提交咨询</h3>
                            <p>填写联系表单，告诉我们您的需求和问题</p>
                        </div>
                    </div>
                    
                    <div class="process-step">
                        <div class="step-number">2</div>
                        <div class="step-content">
                            <h3>专业评估</h3>
                            <p>我们的专业团队会评估您的需求并制定解决方案</p>
                        </div>
                    </div>
                    
                    <div class="process-step">
                        <div class="step-number">3</div>
                        <div class="step-content">
                            <h3>沟通反馈</h3>
                            <p>我们将在24小时内与您联系，讨论解决方案</p>
                        </div>
                    </div>
                    
                    <div class="process-step">
                        <div class="step-number">4</div>
                        <div class="step-content">
                            <h3>持续服务</h3>
                            <p>我们提供持续的服务支持，确保您的问题得到圆满解决</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 客户评价轮播 -->
            <div class="testimonial-section">
                <div class="section-heading">
                    <h2>客户对我们的评价</h2>
                    <p>听听我们的客户怎么说</p>
                </div>
                
                <div class="testimonial-carousel">
                    <div class="testimonial-card active">
                        <div class="testimonial-quote">
                            <i class="fas fa-quote-left"></i>
                            <p>客服团队非常专业，遇到的所有问题都能得到及时解答。产品质量也很好，健康又美味，是我日常饮食的首选！</p>
                        </div>
                        <div class="testimonial-author">
                            <p class="author-name">李小华</p>
                            <p class="author-title">软件工程师</p>
                        </div>
                    </div>
                    
                    <div class="testimonial-card">
                        <div class="testimonial-quote">
                            <i class="fas fa-quote-left"></i>
                            <p>健康食品公司的个性化饮食方案帮助我解决了长期的健康问题，客服的跟进也很到位，非常满意！</p>
                        </div>
                        <div class="testimonial-author">
                            <p class="author-name">王建国</p>
                            <p class="author-title">企业高管</p>
                        </div>
                    </div>
                    
                    <div class="testimonial-card">
                        <div class="testimonial-quote">
                            <i class="fas fa-quote-left"></i>
                            <p>从下单到配送，整个过程都非常顺畅。食材新鲜，搭配科学，售后服务也很贴心。推荐给所有注重健康的朋友！</p>
                        </div>
                        <div class="testimonial-author">
                            <p class="author-name">张美丽</p>
                            <p class="author-title">健身教练</p>
                        </div>
                    </div>
                    
                    <div class="testimonial-controls">
                        <button class="control-prev"><i class="fas fa-chevron-left"></i></button>
                        <div class="control-dots">
                            <span class="dot active"></span>
                            <span class="dot"></span>
                            <span class="dot"></span>
                        </div>
                        <button class="control-next"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <div class="page-footer">
        <div class="page-footer-content">
            <p>© 2025 健康食品公司 版权所有</p>
            <p>地址：上海市浦东新区健康路123号</p>
            <p>电话：021-12345678</p>
            <div class="page-footer-links">
                <a href="#">隐私政策</a> |
                <a href="#">使用条款</a> |
                <a href="#">网站地图</a> |
                <a href="#">招贤纳士</a>
            </div>
        </div>
    </div>

    <script>
        function handleSubmit(event) {
            event.preventDefault();
            alert("提交成功！我们会尽快与您联系。");
        }

        // FAQ 展开/收起功能
        document.querySelectorAll('.faq-question').forEach(question => {
            question.addEventListener('click', () => {
                const faqItem = question.parentElement;
                faqItem.classList.toggle('active');
            });
        });
        
        // 客户评价轮播功能
        document.addEventListener('DOMContentLoaded', function() {
            const testimonialCards = document.querySelectorAll('.testimonial-card');
            const dots = document.querySelectorAll('.dot');
            const prevBtn = document.querySelector('.control-prev');
            const nextBtn = document.querySelector('.control-next');
            let currentIndex = 0;
            
            // 显示指定索引的评价卡片
            function showCard(index) {
                testimonialCards.forEach(card => card.classList.remove('active'));
                dots.forEach(dot => dot.classList.remove('active'));
                
                testimonialCards[index].classList.add('active');
                dots[index].classList.add('active');
                currentIndex = index;
            }
            
            // 切换到下一个评价卡片
            function nextCard() {
                let nextIndex = currentIndex + 1;
                if (nextIndex >= testimonialCards.length) {
                    nextIndex = 0;
                }
                showCard(nextIndex);
            }
            
            // 切换到上一个评价卡片
            function prevCard() {
                let prevIndex = currentIndex - 1;
                if (prevIndex < 0) {
                    prevIndex = testimonialCards.length - 1;
                }
                showCard(prevIndex);
            }
            
            // 点击轮播控制按钮
            if (nextBtn) nextBtn.addEventListener('click', nextCard);
            if (prevBtn) prevBtn.addEventListener('click', prevCard);
            
            // 点击圆点切换到对应的卡片
            dots.forEach((dot, index) => {
                dot.addEventListener('click', () => {
                    showCard(index);
                });
            });
            
            // 自动轮播
            let interval = setInterval(nextCard, 5000);
            
            // 鼠标悬停时暂停自动轮播
            const carousel = document.querySelector('.testimonial-carousel');
            if (carousel) {
                carousel.addEventListener('mouseenter', () => {
                    clearInterval(interval);
                });
                
                carousel.addEventListener('mouseleave', () => {
                    interval = setInterval(nextCard, 5000);
                });
            }
        });
    </script>
</body>
</html>
